<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="12" :style="{ marginBottom: '24px' }">
        <a-card>
          <div slot="title">
            {{ $t('dataWechat.wxzh') }}
          </div>
          <div class="table-operator">
          </div>
          <div>
            <a-form :form="form">
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                :label="this.$t('dataWechat.hyzh')"
              >
                <a-textarea v-model="data" :placeholder="this.$t('dataWechat.yxygwxh')" :rows="10" />
              </a-form-item>
              <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                <a-button :loading="loading" type="primary"  @click="handleClickSubmit">
                  {{ $t('dataWechat.tj') }}
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
  },
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      formTailLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20, offset: 4 },
      },
      loading: true,
      user: {},
      data: ''
    }
  },
  methods: {
    getUser () {
      this.loading = true
      let url = '/user/info'
      this.$http.get(url).then(res => {
        this.user = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('dataWechat.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData () {
      this.loading = true
      let url = '/user/get_wechat_list'
      this.$http.get(url).then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('dataWechat.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData2 () {
      this.loading = true
      let url = '/user/self_recharge_list?limit=10'
      this.$http.get(url).then(res => {
        this.data2 = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('dataWechat.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    onSearch (val) {
      this.mInfo = ''
      this.loading = true
      this.$http.get("/user/m_info?username="+val).then(res => {
        if (res.code == 0) {
          this.mInfo = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('dataWechat.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    handleClickSubmit () {
      if (!this.data) {
        this.$message.error(this.$t('dataWechat.zsblygwxh'))
        return
      }
      this.loading = true
      this.$http.post('/user/save_wechat', this.$qs.stringify({
        data: this.data
      })).then(res => {
        if (res.code === 0) {
          this.getData()
          this.$notification.success({
            message: this.$t('dataWechat.cg'),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t('dataWechat.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('dataWechat.sb'),
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    }
  },
  mounted () {
    this.getUser()
    this.getData()
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
</style>
